<template>
    <div class="news">
        <h2>我是News组件</h2>
        <ul>
            <li v-for="news in newsList" :key="news.id">{{news.title}}</li>
            <h2>{{msg}}</h2>
            <h2>{{address}}</h2>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'News',
        data() {
            return {
                newsList: [{
                        id: '001',
                        title: '震惊！尚硅谷一男老师竟然'
                    },
                    {
                        id: '002',
                        title: '重要通知，有微信的否注意了'
                    }
                ],
                msg: '',
                address: ''
            }
        },
        methods: {
            getMsg(val) {
                this.msg = val.name;
                this.address = val.address;
            }
        },
        mounted() {
            this.$bus.$on('getMsg', this.getMsg);
        },
        beforeDestroy(){
            this.$bus.$off('getMsg')
        }
    }
</script>

<style>
    .news {
        background-color: skyblue;
        padding: 20px;
    }
</style>